<template>
  <div>
    <div style="margin-top: 15px;">
      <el-row style="background-color: white;">
        <el-col :span="2">
        <el-button type="primary" @click="dialogVisible2=true" >新增用户</el-button>
        </el-col>
        <el-col :span="12">
          <el-input placeholder="请输入姓名" v-model="username" >
            <el-button slot="append" icon="el-icon-search" @click="findUserbyName"></el-button>
          </el-input>
        </el-col>
      </el-row>

    </div>



    <template>
      <el-table :data="Users" border style="width: 100%">
        <el-table-column prop="userId" label="用户编号">
        </el-table-column>
        <el-table-column prop="username" label="用户名">
        </el-table-column>
        <el-table-column prop="userTel" label="电话">
        </el-table-column>
        <el-table-column prop="userEmail" label="邮箱">
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template slot-scope="scope" type=index>
            <el-button @click="openDialog(scope.row,index)" type="text" size="small">修改</el-button>
            <el-button @click="delUser(scope.row)"  type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <el-dialog title="编辑用户信息" :visible.sync="dialogVisible" width="30%" :close="closeDialog">
      <el-form :model="tempUser" ref="tempUser" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户编号" prop="">
          <el-input type="text" v-model="tempUser.userId" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="用户名" prop="text">
          <el-input type="text" v-model="tempUser.username" autocomplete="off" disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="text">
          <el-input type="text" v-model="tempUser.userTel" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="邮箱" prop="text">
          <el-input type="text" v-model="tempUser.userEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible=false">取消</el-button>
          <el-button type="primary" @click="submitForm('tempUser')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="新增用户" :visible.sync="dialogVisible2" width="30%" :close="closeDialog2">
      <el-form :model="tempUser2" ref="tempUser2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="用户名" prop="text">
          <el-input type="text" v-model="tempUser2.username" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="text">
          <el-input type="text" v-model="tempUser2.userTel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="text">
          <el-input type="text" v-model="tempUser2.userEmail" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible2=false">取消</el-button>
          <el-button type="primary" @click="submitForm2('tempUser2')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>




    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageinfo.current"
      :page-sizes="[2, 4, 8, 16]" :page-size="pageinfo.size" layout="total, sizes, prev, pager, next, jumper" :total="pageinfo.total">
    </el-pagination>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        dialogVisible2:false,
        //新增用户用户对象
        tempUser2:{
          "userId": "",
          "username": "",
          "roleId": "",
          "userTel": "",
          "userEmail": ""
        },
        //
        username:"",
        //临时用户用户弹窗渲染
        tempUser: "",
        //打开编辑用户弹框
        dialogVisible: false,
        //session中的用户
        user: "",
        //分页得到的Users
        Users: [{
          "userId": "",
          "username": "",
          "roleId": "",
          "userTel": "",
          "userEmail": ""
        }],
        //分页信息
        pageinfo: {
          "records": [],
          "total": 0,
          "size": 0,
          "current": 0,
          "pages": 0
        }
      }
    },
    methods: {
      submitForm2(){
        this.$http.post("/issueUser/insertIssueUser",this.tempUser2).then(resp=>{
          if(resp.data.code==200){
            this.$message.success(resp.data.msg)
            this.dialogVisible2=fale;
            this.pageUser(this.pageinfo.current,this.pageinfo.size,this.username)
          }else{
            this.$message.error(resp.data.msg)
            this.tempUser2="";
          }
        })

      },
      closeDialog2(){
        this.tempUser2="";
      },
      findUserbyName(){
        this.pageUser(this.pageinfo.current,this.pageinfo.size,this.username)
      },
      delUser(valUser){
        var flag=true;
        var flag2=false;
        if(valUser.userId==this.user.userId){
          flag=window.confirm("确认要删除自己吗?")
          flag2=flag;
        }
        if(flag){
          this.$http.post("issueUser/rmuser",valUser).then(resp=>{
            if(resp.data.code==200){
              this.$message.success(resp.data.msg)
              this.pageUser(this.pageinfo.current,this.pageinfo.size,this.username)
              if(flag2){
                this.$http.post("/logout").then(resp => {
                })
              }
            }else{
              this.$message.error(resp.data.msg)
            }
          })
        }

      },
      //提交修改信息
      handleSizeChange(val) {
        this.pageUser(this.pageinfo.current,val,this.username)
      },
      handleCurrentChange(val) {
        this.pageUser(val,this.pageinfo.size,this.username)
      },
      submitForm() {
        this.$http.post("issueUser/updateIssueUser", this.tempUser).then(resp => {
          if (resp.data.code = 200) {
            this.$message.success(resp.data.msg);
            this.pageUser(this.pageinfo.current,this.pageinfo.size,this.username)
          } else {
            this.$message.error(resp.data.msg);
          }
        })
        this.dialogVisible = false;
        this.pageUser(this.pageinfo.current,this.pageinfo.size,this.username)
        location.reload();
      },
      closeDialog() {
        this.tempUser = "";
      },
      //打开弹窗
      openDialog(user, index) {
        this.dialogVisible = true;
        this.tempUser = JSON.parse(JSON.stringify(user));
      },
      loaduser() {
        this.user = JSON.parse(localStorage.getItem("com.woniu.loginUser"));
      },
      pageUser(pIndex, pSize, username) {
        this.$http.get("/issueUser/getUserPage", {
          params: {
            "pageIndex": pIndex,
            "pageSize": pSize,
            "username": username
          }
        }).then(resp => {
          this.pageinfo = resp.data.data;
          this.Users = resp.data.data.records;
        })
      }
    },
    created() {
      this.loaduser();
      this.pageUser(1, 10)
    }
  }

</script>

<style>
</style>
